<template>
  <div class="component-teamCount">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>施工队结算
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont" style="font-weight:700">&#xe63d;</span>筛选查询
          </p>
          <div class="right">
            <button @click="findRes">查询</button>
          </div>
        </div>
      </div>
    </div>

    <div class="component-search-box">
      <el-form :inline="true" :model="teamSearch" class="demo-form-inline">
        <el-form-item label="施工队：" style="width:325px;">
          <el-select v-model="teamSearch.team" clearable placeholder="请选择施工队">
            <el-option v-for="(item,index) in teamList" :key="index" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目部：" style="width:320px;margin-left: 10px;">
          <el-select v-model="teamSearch.pro" clearable placeholder="请选择项目部">
            <el-option v-for="(item,index) in proList" :key="index" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </el-form-item>
       <!-- <el-form-item label="付款状态：" style="width:320px;margin-left: 10px;">
          <el-select v-model="teamSearch.state" clearable placeholder="请选择付款状态">
            <el-option label="已结算" value="2"></el-option>
            <el-option label="待结算" value="1"></el-option>
            <el-option label="未结算" value="0"></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
    </div>

    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe61e;</span>
            负责项目
          </p>
          <div class="right">
          </div>
        </div>
      </div>
    </div>

    <div class="table">
      <el-table
        ref="multipleTable"
        :data="teamInfo"
        tooltip-effect="dark"
        style="width: 1100px;margin:0 auto"
        border
      >
        <el-table-column label="序号" align="center" width="100" type="index"></el-table-column>
        <el-table-column label="项目部" align="center" prop="departName"></el-table-column>
        <el-table-column label="施工队队长" align="center" prop="orgName"></el-table-column>
        <el-table-column label="队人数" align="center" prop="num"></el-table-column>
        <!--<el-table-column label="付款状态" align="center" prop="payStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.payStatus == 0">未结算</span>
            <span v-if="scope.row.payStatus == 1">待结算</span>
            <span v-if="scope.row.payStatus == 2">已结算</span>
          </template>
        </el-table-column>-->
        <el-table-column label="已结算金额（元）" align="center" prop="accountMoney"></el-table-column>
        <el-table-column label="未结算金额（元）" align="center" prop="waitMoney"></el-table-column>
        <el-table-column label="操作信息" align="center" width="160">
          <template slot-scope="scope">
            <a @click="handleDetail(scope.row.orgId)" type="text" size="small" class="red">查看详情</a>
            <a v-if="scope.row.waitMoney != 0" @click="handlePay(scope.row)" type="text" size="small" class="red">付款</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="component-paging" v-if="teamInfo.length > 0">
      <div class="table-bottom">
        <div class="bottom-left" style="margin-left: 42px;">
        </div>
        <div class="paging">
          <div class="paging-left">
            <p>
              共
              <span>{{Math.ceil(total/pageSize)}}</span> 页/
              <span>{{total}}</span> 条数据
            </p>
          </div>
          <el-pagination
            background
            @size-change="SizeChange($event,dataInit,currentPage,pageSize)"
            @current-change="CurrentChange($event,dataInit,currentPage,pageSize)"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!--查看详情对话框-->
    <div class="component-model">
      <el-dialog title="查看详情" :visible.sync="dialogVisible" width="600px">
        暂无信息~
       <!-- <div class="component_model_list">
          <div>附件名称：{{filstlist.fileName}}</div>
          <div>图片预览：<ul><li @click="imgFlag = !imgFlag">{{filstlist.fileUrl}}</li></ul></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="dialogVisible = false">确定</el-button>
        </span>-->
      </el-dialog>
    </div>

    <!--图片预览-->
    <div class="component-model">
      <el-dialog title="预览" :visible.sync="imgFlag" width="600px">
        <img :src="exe_img" style="max-width: 500px;">
      </el-dialog>
    </div>

    <!--付款信息-->
    <div class="component-model component-modelPay">
      <el-dialog title="付款信息" :visible.sync="payFlag" width="600px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
          <el-form-item label="付款金额：" prop="money" style="margin-bottom: 20px;">
            <el-input type="number" v-model="ruleForm.money" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="付款银行卡号：" prop="payCards" style="margin-bottom: 20px;">
            <el-select v-model="ruleForm.payCards" placeholder="请选择付款银行卡号" style="width:350px;" @change="changePay">
              <el-option v-for="(item,index) in payList" :label="item.accountNo" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款银行卡号：" prop="cards" style="margin-bottom: 20px;">
            <el-select v-model="ruleForm.cards" placeholder="请选择付款银行卡号" style="width:350px;"  @change="receiveCards">
              <el-option v-for="(item,index) in receList" :label="item.accountNo" :value="item.accountId" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收款人：" prop="name" style="margin-bottom: 20px;">
            <el-input v-model="ruleForm.name" disabled style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="payBtn">
              <a @click="submitForm('ruleForm')">完成</a>
              <a @click="resetForm('ruleForm')">重置</a>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
    name:"teamCount",
    data(){
        return {
          ms_roleName:localStorage.getItem("roleName"),
          teamSearch: {
            team: "",
            pro: "",
            state:''
          },
          teamList:[],//施工队队长列表
          proList:[],//项目部列表
          teamInfo:[],//查询信息列表
          // 数据总条数
          total: 10,
          // 每页显示数据的条数
          pageSize: 10,
          // 当前显示的页面页码
          currentPage: 1,
          dialogVisible:false,//查看详情的弹框
          exe_img:img_url,//图片路径前缀
          imgFlag:false,//图片是否预览
          payFlag:false,//付款信息
          ruleForm: {
            money:'',//付款金额
            payCards:'',//付款人银行卡号
            cards:'',//收款人银行卡号
            name: '',//付款人
          },
          rules: {
            money: [
              {required: true, message: '请输入付款金额', trigger: 'blur'},
            ],
            name: [
              {required: true, message: '请输入收款人', trigger: 'blur'},
            ],
            cards: [
              {required: true, message: '请输入收款人银行卡号', trigger: 'change'},
            ],
            payCards:[
              { required: true, message: '请选择付款人银行卡号', trigger: 'change' }
            ]
          },
          filstlist:{},//文件名字，详情
          payList:[],//付款银行卡号
          receList:[],//收款银行卡号
          teamId:'',//施工队负责项目Id
          proId:'',//项目Id
          newArray:{},//付款信息
          newArrays:{},//收款信息
        };
    },
    mounted(){
      this.teamLists();//施工队列表
      this.proLists();//项目部列表
      this.dataInit();//列表查询
      this.payCounts();//付款银行卡号
      this.receCounts();//收款银行卡号
    },
    methods:{
      //获取施工队列表
      teamLists(){
        let that = this;
        let suCb = function(res){
          that.teamList = res.data.data
        }
        let erCb = function(res){
          console.log(res)
        }
        let palyParam = {
          url: "/api/web/proTeam/getAllTeamList",
          methods:'post',
          data: {},
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //获取项目部列表
      proLists(){
        let that = this;
        let suCb = function(res){
          that.proList = res.data.data;
          console.log(res.data.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {}
        let palyParam = {
          url: "/api/web/proTeamColse/getSysOrgName",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //列表查询
      dataInit(){
        let that = this;
        let suCb = function(res){
          that.total = res.data.data.rowCount;
          that.teamInfo = res.data.data.records;
          console.log(res.data.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          pageCurrent:that.currentPage.toString(),
          pageSize:that.pageSize.toString(),
          orgId:that.teamSearch.team,
          payStatus:that.teamSearch.state,
          deporgId:that.teamSearch.pro
        }
        let palyParam = {
          url: "/api/web/proTeamColse/getProTeamClose",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //搜索
      findRes(){
          this.currentPage = 1;
          this.dataInit();
      },
      //查看详情
      handleDetail(val){
        console.log(val)
        this.dialogVisible = true;
        let that = this;
        let suCb = function(res){
          that.filstlist = res.data.data || {};
          console.log(res.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          proTeamId:val
        }
        let palyParam = {
          url: "/api/web/proTeamColse/getImageById",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //点击付款
      handlePay(val){
        console.log(val);
        this.payFlag = true;
        this.ruleForm = {
          money:'',//付款金额
          payCards:'',//付款人银行卡号
          cards:'',//收款人银行卡号
          name: '',//付款人
        }
        this.teamId = val.proTeamId;//施工队负责项目Id
        this.proId = val.pid;//项目Id
      },
      //付款完成
      paySuccess(){
        let that = this;
        let suCb = function(res){
          that.payFlag = false;
          that.dataInit();
          console.log(res)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          proTeamId: that.teamId,
          proId: that.proId,
          payAccount: that.ruleForm.payCards,
          arrivalAccount: that.ruleForm.cards,
          arrivalMoney: that.ruleForm.money,
          belongOrg:that.newArray.belongOrg
        }
        let palyParam = {
          url: "/api/web/proTeamColse/updatePayStatus",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.paySuccess()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //选择付款银行
      changePay(){
        this.newArray = this.payList.find((item) => {
          if(item.accountId === this.ruleForm.payCards){
            return item
          }
        });
        console.log(this.newArray)
      },
      //付款银行卡号
      payCounts(){
        let that = this;
        let suCb = function(res){
          that.payList = res.data.data || [];
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          orgType:"0"
        }
        let palyParam = {
          url: "/api/web/proTeamColse/getBankAccount",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //选择收款
      receiveCards(){
          console.log(111)
        this.newArrays = this.receList.find((item) => {
          if(item.accountId === this.ruleForm.cards){
            return item
          }
        });
        console.log(this.newArrays)
        this.ruleForm.name = this.newArrays.orgname;
      },
      //收款银行卡号
      receCounts(){
        let that = this;
        let suCb = function(res){
          that.receList = res.data.data || [];
          console.log(res.data.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let postData = {
          orgType:"2"
        }
        let palyParam = {
          url: "/api/web/proTeamColse/getBankAccount",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      }
    }
}
</script>

<style scoped>
  .component-searchHeader .search-header {
    width: 1100px;
    box-sizing: border-box;
    border: 1px solid rgba(228, 228, 228, 1);
    background-color: rgba(255, 255, 255, 1);
    margin: 20px auto 0;
  }

  .component-searchHeader .search-header .left-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(243, 243, 243, 1);
    height: 45px;
    box-sizing: border-box;
  }

  .component-searchHeader .search-header .left-title .left-text {
    width: 20%;
    color: #666;
    line-height: 45px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    margin: 0 0 0 30px;
  }

  .component-searchHeader .right {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
  }

  .component-searchHeader .right button {
    padding: 0 25px;
    height: 30px;
    margin: 8px 5px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .component-searchHeader .right button:hover {
    background-color: #f3f3f3;
    cursor: pointer;
  }
  .component-search-box {
    width: 1100px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-top: none;
    margin: 0 auto;
    text-align: left;
    padding-left: 30px;
    line-height: 60px;
    padding-bottom: 15px;
    padding-top: 15px;
  }
  .component-search-box .el-input__inner {
    height: 35px;
    display: inline-block;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .component-listHeader .search-header {
    width: 1100px;
    box-sizing: border-box;
    border: 1px solid rgba(228, 228, 228, 1);
    border-bottom: none;
    background-color: rgba(255, 255, 255, 1);
    margin: 20px auto 0;
  }

  .component-listHeader .search-header .left-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(243, 243, 243, 1);
    height: 45px;
    box-sizing: border-box;
  }

  .component-listHeader .search-header .left-title .left-text {
    width: 20%;
    color: #666;
    line-height: 45px;
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 12px;
    text-align: left;
    margin: 0 0 0 30px;
  }

  .component-listHeader .search-header .right {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
  }

  .component-listHeader .search-header .right button{
    padding: 0 15px;
    height: 30px;
    width: 110px;
    margin: 6px 5px;
    line-height: 30px;
    font-size: 14px;
    color: #1abc9c;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .el-form-item {
    text-align: right;
    width: 310px;
  }
  .component-listHeader .search-header .right button:hover {
    background-color: #1abc9c;
    color: #fff;
  }
  .component-listHeader .search-header .right .right-select-margin {
    margin-top: 8px;
    margin-right: 8px;
  }
  a{
    cursor: pointer;
  }
  .component_model_list{
     text-align: left;
  }
  .component_model_list>div:first-of-type{
    margin-bottom: 10px;
  }
  .component_model_list ul{
    padding-left: 70px;
    margin-top: -16px;
  }
  .component_model_list ul li{
    cursor: pointer;
  }
  .payBtn a{
    padding: 10px 20px;
  }
  .payBtn a:first-of-type{
    background: #1ABC9C;
    color: #fff;
    border-radius: 4px;
  }
  .payBtn a:last-of-type{
    border:1px solid #ccc;
    margin-left: 20px;
    border-radius: 4px;
  }
  .red{
    color: #1abc9a;
  }
  .red:first-of-type{
    margin-right: 10px;
  }
</style>
